<template>
    <div class="app-container" v-loading="detailLoading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
            <el-row :gutter="15">
                <el-col :span="24">
                    <MmvTitle title="保险车辆"></MmvTitle>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号" prop="carNo">
                        {{form.carNo}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车架号" prop="carNo">
                        {{form.carNo}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆信息" prop="carNo">
                        {{form.carInfo}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <MmvTitle title="商业险"></MmvTitle>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商业险保险公司" prop="sycompulsoryCompany">
                        {{form.sycompulsoryCompany}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商业险保单号" prop="sycompulsoryNo">
                        {{form.sycompulsoryNo}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="商业险时间" prop="sycompulsoryTime">
                        {{form.sycompulsoryTime[0] || '--'}} 至 {{form.sycompulsoryTime[1] || '--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商业险合计费用" prop="sycommercialTotalAmount">
                        {{form.sycommercialTotalAmount}} /元
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="商业险备注" prop="sycompulsoryRemark">
                        {{form.sycompulsoryRemark || '无备注'}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="商业险附件" prop="syUrlList">
                        <template v-if="!form.syUrlList || !form.syUrlList.length">未上传附件</template>
                        <template v-for="item in form.syUrlList">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" style="width:160px;height:90px;margin-right:15px;" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-table :data="form.itemList">
                        <el-table-column label="险种名称">
                            <template slot-scope="{row}">{{row.insuranceName || '--' }}</template>
                        </el-table-column>
                        <el-table-column label="保额（万元）">
                            <template slot-scope="{row}">{{row.sumInsured + '万元' || '--' }}</template>
                        </el-table-column>
                        <el-table-column label="保费">
                            <template slot-scope="{row}">{{row.insurancePremium + '元' || '--' }}</template>
                        </el-table-column>
                    </el-table>
                    <br>
                </el-col>
                <el-col :span="24">
                    <MmvTitle title="交强险"></MmvTitle>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交强险保险公司" prop="jqcompulsoryCompany">
                        {{form.jqcompulsoryCompany}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交强险保单号" prop="jqcompulsoryNo">
                        {{form.jqcompulsoryNo}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="交强险时间" prop="jqcompulsoryTime">
                        {{form.jqcompulsoryTime[0] || '--'}} 至 {{form.jqcompulsoryTime[1] || '--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交强险保险费用" prop="jqcompulsoryAmount">
                        {{form.jqcompulsoryAmount}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="交强险备注" prop="jqcompulsoryRemark">
                        {{form.jqcompulsoryRemark}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="交强险附件" prop="jqUrlList">
                        <template v-if="!form.jqUrlList || !form.jqUrlList.length">未上传附件</template>
                        <template v-for="item in form.jqUrlList">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" style="width:160px;height:90px;margin-right:15px;" fit="contain"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import MmvCompany from '@/views/maintenance/company/index.vue'
import { listInsurance, getInsurance, delInsurance, addInsurance, updateInsurance, exportInsurance, carBasicList, insuranceCompanyList } from "@/api/maintenance/insurance";
import MmvChepaihao from '@/components/MmvUI/MmvChepaihao.vue';
export default {
    components: {
        MmvTitle,
        MmvChepaihao,
        MmvCompany,
    },
    dicts: ['insuranceType'],
    props: ['carId'],
    data() {
        return {
            detailLoading: false,
            showShangye: false, // 显示选择商业险公司
            carBasicForm: false,
            showJiaoqiang: false, // 显示选择交强险公司
            carBasicList: [],
            totalcarBasic: 0,
            title: "",
            loading: true,
            xianzhong: {},
            insuranceName: null,
            name: "",
            form: {
                carNo: '', // 车牌号
                vinNo: '', // 车架号
                carInfo: '', // 车辆信息
                syId: '', // 商业险id
                sycompulsoryCompanyId: '',
                sycompulsoryCompany: null, // 商业险保险公司
                sycompulsoryNo: '', // 商业险保单号
                sycompulsoryTime: [], // 商业险时间
                sycompulsoryAmount: '', // 商业险保险费用
                sycommercialTotalAmount: '', // 商业险合计费用
                sycompulsoryRemark: '', // 商业险备注
                syUrlList: [], // 商业险附件
                jqId: '', // 交强险id
                jqcompulsoryCompany: null, // 交强险保险公司
                jqcompulsoryNo: '', // 交强险保单号
                jqcompulsoryTime: [], // 交强险时间
                jqcompulsoryAmount: '', // 交强险保险费用
                jqcommercialTotalAmount: '', // 交强险合计费用
                jqcompulsoryRemark: '', // 交强险备注
                jqUrlList: [], // 交强险附件
                itemList: [], // 商业险险种
            },
            rules: {
                carNo: [{ required: true, message: "车辆编号不能为空" }],
                sycompulsoryCompany: [{ required: true, message: "保险公司不能为空" }],
                sycompulsoryNo: [{ required: true, message: "保单编号不能为空" }],
                sycompulsoryTime: [{ required: true, message: "时间不能为空" }],
                syUrlList: [{ required: true, message: "附件不能为空" }],
                jqcompulsoryCompany: [{ required: true, message: "保险公司不能为空" }],
                jqcompulsoryNo: [{ required: true, message: "保单编号不能为空" }],
                jqcompulsoryTime: [{ required: true, message: "时间不能为空" }],
                jqcompulsoryAmount: [{ required: true, message: "保险费用不能为空" }],
                jqUrlList: [{ required: true, message: "附件不能为空" }],
            },
            syList: [], // 商业险保险公司
            jqList: [], // 交强险保险公司
            carParams: {
                carNo: null,
                pageNum: 1,
                pageSize: 10,
            }
        };
    },
    computed: {
        formData() {
            const formData = {
                carId: this.form.carId, // 车辆ID
                carNo: this.form.carNo, // 车牌号
                vinNo: this.form.vinNo, // 车架号
                carInfo: this.form.carInfo, // 车辆信息
                syId: this.form.syId, // 商业险id
                sycompulsoryCompanyId: this.form.sycompulsoryCompanyId,
                sycompulsoryCompany: this.form.sycompulsoryCompany,
                sycompulsoryNo: this.form.sycompulsoryNo, // 商业险保单号
                sycompulsoryStartTime: this.form.sycompulsoryTime[0], // 商业险开始时间
                sycompulsoryEndTime: this.form.sycompulsoryTime[1], // 商业险结束时间
                sycompulsoryAmount: parseFloat(this.form.sycommercialTotalAmount), // 商业险保险费用
                sycommercialTotalAmount: parseFloat(this.form.sycommercialTotalAmount), // 商业险合计费用
                sycompulsoryRemark: this.form.sycompulsoryRemark, // 商业险备注
                syUrlList: this.form.syUrlList, // 商业险附件
                jqId: this.form.jqId, // 交强险id
                jqcompulsoryCompanyId: this.form.jqcompulsoryCompanyId,
                jqcompulsoryCompany: this.form.jqcompulsoryCompany,
                jqcompulsoryNo: this.form.jqcompulsoryNo, // 交强险保单号
                jqcompulsoryStartTime: this.form.jqcompulsoryTime[0], // 交强险开始时间
                jqcompulsoryEndTime: this.form.jqcompulsoryTime[1], // 交强险结束时间
                jqcompulsoryAmount: parseFloat(this.form.jqcompulsoryAmount), // 交强险保险费用
                jqcommercialTotalAmount: parseFloat(this.form.jqcompulsoryAmount), // 交强险合计费用
                jqcompulsoryRemark: this.form.jqcompulsoryRemark, // 交强险备注
                jqUrlList: this.form.jqUrlList, // 交强险附件
                itemList: this.form.itemList, // 商业险险种
            };
            return formData;
        },
    },
    async mounted() {
        this.xianzhong = {}
        this.syxList()
        this.jqxList()
        this.form.jqcompulsoryCompanyId = null
        this.form.sycompulsoryCompanyId = null
        this.form.jqcompulsoryCompany = null
        this.form.sycompulsoryCompany = null
        if (this.carId) {
            this.detailLoading = true;
            await this.getDetail(this.carId);
            this.detailLoading = false;
        }
    },
    methods: {
        //商业险
        syxList() {
            insuranceCompanyList(2).then(response => {
                this.syList = response.data;
            })
        },
        //交强险
        jqxList() {
            insuranceCompanyList(1).then(response => {
                this.jqList = response.data;
            })
        },
        //险种
        xianzhongChange(val) {
            this.insuranceName = null
            this.xianzhong = {}
            this.dict.type.insuranceType.map(item => {
                if (val == item.value) {
                    this.insuranceName = item.label
                }
            })
            this.xianzhong = {
                "insuranceType": val,
                "insuranceName": this.insuranceName,
                "sumInsured": 0,
                "insurancePremium": 0,
            }
        },
        //添加险种
        addXianzhong() {
            if (this.xianzhong.insuranceType == null) {
                alert('请选择险种')
                return
            }

            this.form.sycommercialTotalAmount = 0
            if (!this.form.itemList.find(item => {
                return item.insuranceType == this.xianzhong.insuranceType
            })) {
                this.form.itemList.push(this.xianzhong)
                this.form.sycommercialTotalAmount = 0
                this.form.itemList.map(item => {
                    this.form.sycommercialTotalAmount = parseFloat(this.form.sycommercialTotalAmount) + parseFloat(item.insurancePremium)
                })
                this.xianzhong = {}
            } else {
                alert('当前险种已添加，请重新选择')
                return
            }

        },
        //计算商业保险费用
        addAmount() {
            this.form.sycommercialTotalAmount = 0
            this.form.itemList.map(item => {
                this.form.sycommercialTotalAmount = parseFloat(this.form.sycommercialTotalAmount) + parseFloat(item.insurancePremium)
            })
        },
        syCompany(val) {
            this.form.sycompulsoryCompanyId = val
            this.syList.map(item => {
                if (val == item.companyNo) {
                    this.form.sycompulsoryCompany = item.companyName
                }
            })
        },
        jqCompany(val) {
            console.info(val)
            this.form.jqcompulsoryCompanyId = val
            this.syList.map(item => {
                if (val == item.companyNo) {
                    this.form.jqcompulsoryCompany = item.companyName
                }
            })
        },
        carRhandleQuery() {
            this.carParams.pageNum = 1;
            this.carNoClick(this.carParams);
        },
        carResetQuery() {
            this.resetForm("carParam");
            this.carRhandleQuery();
        },
        carNoClick() {
            this.title = "车辆"
            this.carBasicForm = true
            this.loading = true;
            carBasicList(this.carParams).then(response => {
                this.carBasicList = response.rows;
                this.totalcarBasic = response.total;
                this.loading = false;
            });
        },
        selectCar() {
            const list = this.$refs?.MmvChepaihao?.emitData() || [];
            const data = list[0];
            this.form.carId = data.carId;
            this.form.carNo = data.carNo;
            this.form.vinNo = data.vinNo;
            this.form.carInfo = data.carInfo;
            this._carId = data.carId;
            this.carBasicForm = false;
        },
        emitData() {
            return this.formData;
        },
        submitData() {
            return new Promise((resplve, reject) => {
                this.$refs["form"]?.validate(valid => {
                    if (valid) {
                        console.info('---' + this.formData.syId)
                        console.info('---' + this.formData.jqId)
                        if (this.formData.syId != null && this.formData.syId != '' && this.formData.jqId != null && this.formData.jqId != '') {
                            updateInsurance(this.formData).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.$emit("close")
                                resplve();
                            });
                        } else {
                            addInsurance(this.formData).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.$emit("close")
                                resplve();
                            });
                        }
                    } else {
                        reject()
                    }
                });
            })
        },
        async getDetail(carId) {
            const result = await getInsurance(carId);
            const data = result.data;
            this.form = Object.assign(this.form, result.data)
            this.form.carNo = data.carNo;// 车牌号
            this.form.vinNo = data.vinNo;// 车架号
            this.form.carInfo = data.carInfo;// 车辆信息
            this.form.syId = data.syId;
            this.form.sycompulsoryCompanyId = data.sycompulsoryCompanyId; // 商业险保险公司编号
            this.form.sycompulsoryCompany = data.sycompulsoryCompany; // 商业险保险公司名称
            this.form.sycompulsoryNo = data.sycompulsoryNo;// 商业险保单号
            this.form.sycompulsoryTime = [data.sycompulsoryStartTime, data.sycompulsoryEndTime];// 商业险时间
            this.form.sycompulsoryAmount = parseFloat(data.sycommercialTotalAmount);// 商业险保险费用
            this.form.sycommercialTotalAmount = parseFloat(data.sycommercialTotalAmount);// 商业险合计费用
            this.form.sycompulsoryRemark = data.sycompulsoryRemark;// 商业险备注
            this.form.syUrlList = data.syUrlList || [];// 商业险附件
            this.form.jqId = data.jqId;
            this.form.jqcompulsoryCompanyId = data.jqcompulsoryCompanyId; // 商业险保险公司编号
            this.form.jqcompulsoryCompany = data.jqcompulsoryCompany; // 商业险保险公司名称
            this.form.jqcompulsoryNo = data.jqcompulsoryNo;// 交强险保单号
            this.form.jqcompulsoryTime = [data.jqcompulsoryStartTime, data.jqcompulsoryEndTime];// 交强险时间
            this.form.jqcompulsoryAmount = parseFloat(data.jqcompulsoryAmount);// 交强险保险费用
            this.form.jqcommercialTotalAmount = parseFloat(data.jqcommercialTotalAmount);// 交强险合计费用
            this.form.jqcompulsoryRemark = data.jqcompulsoryRemark;// 交强险备注
            this.form.jqUrlList = data.jqUrlList || [];// 交强险附件
            this.form.itemList = data.itemList || [];// 商业险险种
        },
    },
}
</script>

<style lang="scss" scoped>
.app-container{
   position: relative;
   .mmv-mask{
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
}
</style>